<template>
	<view class="ablum">
		<!-- 顶部按钮和标签 -->
		<view class="title">
			<view class="top">
				<u--text text="为你推荐播客..."></u--text>
				<view class="top-play" @click="goRadio">
					<text>更多</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
			<swiper class="swiper" :duration="500" next-margin="20px">
				<swiper-item v-for="(item,index) in result" :key="index">
					<view class="swiper-item" v-for="(child,indey) in item" :key="child.id" @tap="send(child.id)">
						<view class="swiper-item-left">
							<u-image :src="child.picUrl" width="55" height="55" radius="6">
							</u-image>
							<view class="swiper-item-left-title">
								<text>{{child.name}}</text>
								<u--text :text="child.rcmdtext" size="13rpx" :lines="1"></u--text>
							</view>
						</view>
						<view class="swiper-item-right" v-if="child.mv && child.mv.lenght !=0" @tap="playmv(child)">
							<u-icon name="play-right-fill" size="25rpx"></u-icon>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>

<script>
	import {
		_getRecommendDj, //每日推荐歌曲
	} from '@/http/home.js'
	export default {
		data() {
			return {
				result: [], //推荐新歌
				arr: [],
				news: []

			}
		},
		methods: {
			async RecommendDj() {
				const {
					djRadios = []
				} = await _getRecommendDj()
				for (let i = 0; i < djRadios.length; i + 3) {
					console.log(this.result);
					this.result.push(djRadios.splice(i, i + 3))
				}
			},
			// 更多
			goRadio() {
				console.log('123');
				uni.switchTab({
					url: '/pages/Podcast/Index'
				})
			},

			//播客详情
			send(id) {
				uni.navigateTo({
					url: '/view/RadioList/RadioList?id=' + id
				})
			},

		},
		created() {
			this.RecommendDj()
		}
	}
</script>

<style lang="scss" scoped>
	.ablum {
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}

	.title {
		padding: 30rpx 30rpx;
	}

	.top {
		display: flex;

		&-play {
			width: 110rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			border-radius: 30rpx;
			border: 1px solid #ccc;
		}
	}

	.swiper {
		height: 400rpx;
		margin-top: 15rpx;
	}

	.swiper-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 10rpx;


		&-left {
			display: flex;
			align-items: center;
			padding-right: 15rpx;
			font-size: 14px;

			&-title {
				display: flex;
				flex-direction: column;
				justify-content: center;
				// align-items: center;
				padding-left: 15rpx;
				width: 440rpx;

				text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		&-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 40rpx;
			border: 1px solid #ccc;
			border-radius: 15rpx;
		}
	}
</style>
